<template>
  <xy-page>
    <div class="playLimit">
      <el-tabs v-model="activeName">
        <el-tab-pane label="播放器密码" name="first">
          <el-form :model="form" :label-width="labwidth">
            <el-form-item label="开关:">
              <el-switch v-model="form.enabled" @change="closeSwitch"></el-switch>
            </el-form-item>
            <div v-show="form.enabled">
              <el-form-item label="播放器密码:">
                <el-input v-model="form.playPwd" maxlength="20" class="w300" show-word-limit></el-input>
                <span>{{form.playPwd.length}}/20</span>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="savePw">保存</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="播放网站限制" name="second">
          <el-form :label-width="labwidth">
            <el-form-item label="使用默认设置:">
              <el-switch v-model="limitSwitch" @change="limitEvent"></el-switch>
            </el-form-item>
            <div v-show="!limitSwitch">
              <el-form-item label="播放网站限制">
                <span class="mgl10 memo">设置后，设置播放黑白名单，白色单允许播放，黑名单无法播放</span>
                <div class="memo">(只需要填写域名，多个域名之间用英文逗号分隔，如：domain.com,domain2.net,sub.domain3.net)</div>
              </el-form-item>
              <el-form-item label="播放网站白名单:">
                <el-input type="textarea" class="w300 ft10" :rows="4" v-model="form.whiteText" placeholder="" resize="none"></el-input>
              </el-form-item>
              <el-form-item label="播放网站黑名单:">
                <el-input type="textarea" class="w300 ft10" :rows="4" v-model="form.blackText" placeholder="" resize="none"></el-input>
              </el-form-item>
              <el-form-item label="">
                <el-button type="primary" @click="updateRestrictWeb">保存</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
      </el-tabs>
    </div>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      limitSwitch: true,
      labwidth:'130px',
      activeName:'first',
      channelId:'',
      appId:'',
      form:{
        enabled: false, // 播放器密码开关
        preEnabled: false, // 播放器密码开关最近一次保存的值 若此值为false,则开关值变为false时不请求接口
        playPwd:'',
        whiteText:'',
        blackText:''
      }
    }
  },
  methods: {
    limitEvent(){
      let reqBody = {
        appId:this.appId,
        channelId:this.channelId,
        globalEnabledType:'restrict'
      }
      if(this.limitSwitch){
        reqBody.enabled = 'Y'
      }else{
        reqBody.enabled = 'N'
      }
      this.$postStream('/admin/instance/ccb/polyv/channel/enabled/update.do',{
        data:reqBody,
        success:(res)=>{
          if(res.success){
            if(this.limitSwitch){
              this.$message.success('开启成功')
            }else{
              this.$message.success('关闭成功')
            }
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('设置失败')
            this.limitSwitch = !this.limitSwitch
          }
        },
        error:()=>{
          res.code == 50001?this.$message.error(res.message):this.$message.error('设置失败')
          this.limitSwitch = !this.limitSwitch
        }
      })
    },
    getRestrict(){//获取播放器限制
      this.$postStream('/admin/instance/ccb/polyv/player/getRestrict.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId
        },
        success: (res)=> {
          if(res.success){
            this.form.enabled = this.booleanChange(res.object.passwdRestrict)
            this.form.preEnabled = this.booleanChange(res.object.passwdRestrict)
            this.form.blackText = res.object.websiteBlacklist || ''
            this.form.whiteText = res.object.websiteWhitelist || ''
            if(res.object.globalSettingEnabled == 'N'){
              this.limitSwitch = false
            }else{
              this.limitSwitch = true
            }
            if(res.object.passwdRestrict != 'N'){
              this.form.playPwd = res.object.passwd || ''
            }
          }else{
            this.$message.error('获取失败!')
          }
        }
      })
    },
    closeSwitch(){
      if(!this.form.enabled){
        this.form.playPwd = ''
        if(!this.form.preEnabled){
          return
        }
        this.updatePlayPassw(()=>{
          this.$message.success('关闭成功!')
        })
      }
    },
    savePw(){
      if(this.form.enabled){
        if(this.form.playPwd == ''){
          this.$message.error('默认设置开启时,播放器密码不能为空!')
          return
        }
        this.updatePlayPassw(()=>{
          this.$message.success('设置成功!')
        })
      }
    },
    // 修改播放器密码
    updatePlayPassw(cb){
      this.$postStream('/admin/instance/ccb/polyv/player/updatePlayPassw.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          enabled: this.letterChange(this.form.enabled),
          passwd: this.form.playPwd||'',
        },
        success: (res)=> {
          if(res.success){
            this.getRestrict()
            this.form.preEnabled = this.form.enabled
            cb && cb()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('设置失败')
          }
        }
      })
    },
   
    updateRestrictWeb(){
      let whiteArea = []
      whiteArea=this.form.whiteText.split(',')
      if(whiteArea==""){
        
      }else{
        for(var i=0;i<whiteArea.length;i++){
          if(!this.$utils.isCom(whiteArea[i])){
            this.$message.error('白名单请填写正确的域名格式')
            return
          }
        }
      }
      
      let blackArea = []
      blackArea=this.form.blackText.split(',')
      if(blackArea==""){
        
      }else{
        for(var i=0;i<blackArea.length;i++){
          if(!this.$utils.isCom(blackArea[i])){
            this.$message.error('黑名单请填写正确域名格式')
            return
          }
        }
      }
      if(this.form.whiteText&&this.form.blackText){
        if(this.form.whiteText.indexOf(this.form.blackText)!=-1){
          this.$message.error('名单不能重复出现名字')
          return
        }
      }
      
      this.$postStream('/admin/instance/ccb/polyv/player/updateRestrictWeb.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          websiteBlacklist: this.form.blackText || '',
          websiteWhitelist: this.form.whiteText || ''
        },
        success: (res)=> {
          if(res.success){
            this.$message.success('设置成功!')
            this.getRestrict()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('设置失败')
          }
        }
      })
    }
  },
  mounted() {
    this.channelId = sessionStorage.getItem('channelId')
    this.appId = sessionStorage.getItem('appId') || ''
    this.getRestrict()
  }
};
</script>

<style lang="scss" scoped>
.memo{
  color: #999;
}
</style>
